<template>
  <div class="container">
    <ScreenAreaV :enPeople="enPeople" @search="searchFn"></ScreenAreaV>

    <el-tabs v-model="chkState" type="card" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="全部" name="-1"></el-tab-pane>
      <el-tab-pane label="待审核" name="0"></el-tab-pane>
      <el-tab-pane label="已审核" name="1"></el-tab-pane>
      <el-tab-pane label="已拒绝" name="2"></el-tab-pane>
    </el-tabs>

    <el-alert :title="'数据一共' + page.total + '条'" type="info" show-icon :closable="false" />

    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="number" label="试题编号" width="120" />
      <el-table-column prop="subject" label="学科" />
      <el-table-column prop="catalog" label="目录" />
      <el-table-column label="题型">
        <template v-slot="{ row }">
          {{ question(row.questionType) }}
        </template>
      </el-table-column>
      <el-table-column label="题干" width="200">
        <template v-slot="{ row }">
          <div v-html="row.question"></div>
        </template>
      </el-table-column>
      <el-table-column label="录入时间" width="180">
      <template v-slot="{ row }">
          {{ formatDate(row.addDate) }}
        </template>
      </el-table-column>
      <el-table-column label="难度">
        <template v-slot="{ row }">
          {{ difficultyFn(row.difficulty) }}
        </template>
      </el-table-column>
      <el-table-column prop="creator" label="录入人" />
      <el-table-column label="审核状态">
        <template v-slot="{ row }">
          {{ chkStateFn(row.chkState) }}
        </template>
      </el-table-column>
      <el-table-column prop="chkRemarks" label="审核意见" />
      <el-table-column prop="chkUser" label="审核人" />
      <el-table-column label="发布状态">
        <template v-slot="{ row }">
          {{ publishStateFn(row) }}
        </template>
      </el-table-column>
      <el-table-column prop="chkState" label="操作" width="280" fixed="right" header-align="center">
        <!-- 已审核则审核type为info -->
        <template v-slot="{ row }">
          <div class="buttons">
            <el-button text="primary" type="primary" size="small" @click="previewFn(row)">预览</el-button>
            <el-button text="primary" type="primary" size="small" :disabled="row.chkState === 0 ? false : true"
              @click="examineDialogVisibleFn(row)">审核
            </el-button>
            <el-button text="primary" type="primary" size="small" :disabled="row.publishState === 1 ? true : false"
              @click="$router.push({ path: 'new', query: { id: row.id} })">修改</el-button>
            <el-button text="primary" type="primary" size="small" @click="choicePublishFn(row)">{{ row.publishState ===
                1 ? '下架' : '上架'
            }}</el-button>
            <el-button text="primary" type="primary" size="small" :disabled="row.publishState === 1 ? true : false"
              @click="del(row)">删除
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <!-- 弹出框 -->
    <el-dialog v-model="centerDialogVisible" title="题目预览" width="50%" align-center>
      <BulletFrame :list="list"></BulletFrame>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="centerDialogVisible = false">
            关闭
          </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 修改-弹出框 -->
    <el-dialog v-model="examineDialogVisible" title="题目审核" width="20%" align-center>
      <div class="choice">
        <el-radio-group v-model="radio1" class="ml-4">
          <el-radio :label="1" size="large">通过</el-radio>
          <el-radio :label="2" size="large">拒绝</el-radio>
        </el-radio-group>
      </div>
        <el-input v-model="textarea" :rows="2" type="textarea" placeholder="请输入审核意见" />
      <template #footer>
          <el-button @click="examineDialogVisible = false">
            取消
          </el-button>
          <el-button type="primary" @click="examineFn">
            确定
          </el-button>
      </template>
    </el-dialog>

    <!-- 分页 -->
    <el-row type="flex" justify="end">
      <el-pagination v-model:current-page="page.page" v-model:page-size="page.pagesize" :page-sizes="[5, 10, 20, 50]"
        :small="small" :disabled="disabled" :background="background" layout="prev, pager, next, sizes, jumper"
        :total="page.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </el-row>
  </div>
</template>

<script>
import ScreenAreaV from '../components/questionsComponents/screenAreaV.vue'
import BulletFrame from '../components/questionsComponents/BulletFrame.vue'
import { choice, remove, choicePublish, choiceCheck, detail } from '@/api/hmmm/questions.js'
import { question, difficultyFn, chkStateFn, publishStateFn } from '@/module-hmmm/components/questionsComponents/hooks/index.js'
import { nextTick, onMounted, reactive, ref, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import moment from 'moment'
// import type { Action } from 'element-plus'
export default {
  components: {
    ScreenAreaV,
    BulletFrame
  },
  setup () {
    // 时间格式
    function formatDate (val, format = 'YYYY-MM-DD h:mm:ss') {
      return moment(val).format(format)
    }
    // 弹框开关
    const centerDialogVisible = ref(false)
    const examineDialogVisible = ref(false)
    const tableData = ref([]) //  列表数据
    const list = ref({}) // 子组件数据
    const chkState = ref('-1') // tab状态 审核状态
    const radio1 = ref(1)
    const textarea = ref('')
    // 搜索表单
    const form = reactive({
      subjectID: undefined,
      keyword: undefined
    })
    // 分页
    const page = reactive({
      page: 1,
      pagesize: 5,
      total: 0
    })
    // 改变pagesize
    const handleSizeChange = (val) => {
      page.pagesize = val
      getQuestionList()
    }
    const handleCurrentChange = (val) => {
      page.page = val
      getQuestionList()
    }
    // 获取精选题库列表
    async function getQuestionList (state) {
      const res = await choice({ ...page, ...form, chkState: state })
      tableData.value = res.data.items
      page.total = res.data.counts
      // console.log(tableData.value)
      // console.log(res)
    }
    onMounted(() => {
      getQuestionList()
    })
    // 预览功能
    async function previewFn (row) {
      centerDialogVisible.value = true
      const res = await detail(row)
      // console.log(res)
      list.value = res.data
    }
    // 消息提示框之上架下架
    const choicePublishFn = (row) => {
      ElMessageBox.confirm(
        `您确认${row.publishState === 1 ? '下架' : '上架'}这道题目吗?`,
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(() => {
          choicePublish({ id: row.id, publishState: row.publishState === 1 ? 0 : 1 }).then(() => {
            ElMessage({
              type: 'success',
              message: '操作成功'
            })
            getQuestionList()
          })
        })
    }
    // 消息提示框之删除
    const del = (row) => {
      ElMessageBox.confirm(
        '此操作将永久删除该题目, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(() => {
          remove(row).then(() => {
            ElMessage({
              type: 'success',
              message: '删除成功'
            })
            getQuestionList()
          })
        })
    }
    // 切换列表
    async function handleClick (el) {
      const name = el.props.name === '-1' ? undefined : el.props.name
      getQuestionList(name)
    }
    // 搜索
    function searchFn (e) {
      // console.log(e)
      form.subjectID = e.subject
      form.keyword = e.keyWords
      getQuestionList()
    }

    // 审核
    const id = ref(0)
    function examineDialogVisibleFn (row) {
      examineDialogVisible.value = true
      // console.log(id)
      id.value = row
      console.log(id.value)
    }
    async function examineFn () {
      if (!textarea.value) {
        // 文本框为空警告
        ElMessage({
          message: 'Warning, this is a warning message.',
          type: 'warning'
        })
      }
      // console.log(id.value)
      id.value.chkState = radio1.value
      id.value.chkRemarks = textarea.value
      await choiceCheck(id.value)
      await getQuestionList()
      examineDialogVisible.value = false
      // 提示成功
      ElMessage({
        message: 'Congrats, this is a success message.',
        type: 'success'
      })
    }
    return {
      centerDialogVisible,
      examineDialogVisible,
      tableData,
      page,
      handleCurrentChange,
      handleSizeChange,
      question,
      difficultyFn,
      chkStateFn,
      chkState,
      publishStateFn,
      previewFn,
      list,
      del,
      choicePublishFn,
      handleClick,
      searchFn,
      examineFn,
      radio1,
      textarea,
      examineDialogVisibleFn,
      formatDate
    }
  }
}
</script>

<style scoped lang="scss">
.container {
  background-color: #fff;
  padding: 15px;
  margin: 10px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
}

.buttons {
  display: flex;

  button {
    margin: 0;
  }
}

.choice {
  padding-bottom: 10px;
}
</style>
